// 获取元素
let list = document.getElementById("mz-nav");
let menuBox = document.getElementById("mz-menu");
let menu = document.querySelectorAll(".mz-menu>ul,.mz-menu>div");
let header = document.getElementById("header");
let logo = document.getElementById("logo");
let login = document.getElementById("mz-login");
let shopcar = document.getElementById("mz-shopcar");

list.children.__proto__.forEach=Array.prototype.forEach;
// 移到对应的li，对应的下拉menu出现
list.onmouseover = function(e){
  if (e.target.tagName.toLowerCase() === "a") {
    menu.forEach((item,index)=>{
      if(index<5){
        item.className="card-group text-center d-flex justify-content-center";
      }else{
        item.className="container-fluid px-0 mz-app-drop";
      }
    })
    
    header.style.backgroundColor="transparent";
    logo.style.fill="#fff";
    list.children.forEach(item=>{
      item.children[0].style.color="#fff";
    });
    e.target.style.color="#fff";
    login.children[0].src="./images/geren0.png";
    shopcar.children[0].src="./images/shopcar0.png";
    let listt = e.target.getAttribute("data-t");
    if (listt) {
      let currentMenu = document.querySelector(`.mz-menu>ul[data-t=${listt}]`);
      let currentApp = document.querySelector(`.mz-menu>div[data-t=${listt}]`);
      // console.log(currentMenu);
      // console.log(currentApp);
      header.style.backgroundColor="#fff";
      logo.style.fill="#008cff";
      list.children.forEach(item=>{
        item.children[0].style.color="#515151"
      });
      login.children[0].src="./images/geren.png";
      shopcar.children[0].src="./images/shopcar.png";
      e.target.style.color="#008cff";
      if (currentMenu) {
        currentMenu.className += " current";
      }else if (currentApp) {
        currentApp.className += " current";
      }else{
        return;
      }
    }else{
      e.target.style.color="#008cff";
      e.target.onmouseleave = function(){
        e.target.style.color="#fff";
      }
    };
  }
}



// 移出下拉menu，menu消失
menuBox.onmouseleave = function(){
  header.style.backgroundColor="transparent";
  logo.style.fill="#fff";
  list.children.forEach(item=>{
    item.children[0].style.color="#fff";
  });
  login.children[0].src="./images/geren0.png";
  shopcar.children[0].src="./images/shopcar0.png";

// 下拉框进行遍历消失
  menu.forEach((item,index)=>{
    if(index<5){
      item.className="card-group text-center d-flex justify-content-center";
    }else{
      item.className="container-fluid px-0 mz-app-drop";
    }
  })
}

$(function(){
  // $.ajax({
  //   url:"http://127.0.0.1:8080/mz/index",
  //   dataType:"json",
  //   success:function(result){
  //     console.log(result);
  //   }
  // })
  
  if(location.search.slice(1)){
    $(".in").css("display","none")
    $(".out").css("display","block")
      .click(function(){
        location.href="index.html"
      })
  }

})